//1.准备查询参数对象
const queryObj = {
    status:'',
    channel_id:'',
    page:1,
    per_page:2
}

let totalCount = 0
async function setArtileList(){
    //获取文章列表
    const res =await axios({
        url: '/v1_0/mp/articles',
        params:queryObj
    })
    console.log(res);
    //展示到指定的标签结构中
    
const htmlStr =res.data.results.map(item =>`<tr>
<td>
    <img src="${item.cover.type === 0 ? `https://img2.baidu.com/it/
    u=2640406343,1419332367&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?
    w=708&amp;h=500` : item.cover.images[0]}" alt=""></td>
<td>${item.title}</td>
<td>
    ${item.status === 1 ? `<span class="badge text-bg-primary">待审核</span>` : `<span class="badge text-bg-success">审核通过</span>`}
</td>
<td>
    <span>${item.pubdate}</span>
</td>
<td>
    <span>${item.read_count}</span>
</td>
<td>
    <span>${item.comment_count}</span>
</td>
<td>
    <span>${item.like_count}</span>
</td>
<td data-id="${item.id}">
        <i class="bi bi-pencil-square edit"></i>
        <i class="bi bi-trash3 del"></i>
        
</td>
</tr>`) 
document.querySelector('.align-middle').innerHTML = htmlStr
    //保存设置文章总条数
    totalCount = res.data.total_count
    document.querySelector('.total-count').innerHTML = `共 ${totalCount} 条`
}
setArtileList()

//设置频道列表数据
async function setChannleList(){
    const res = await axios({
      url: '/v1_0/channels',
    })
    const htmlStr =`<option value="" selected="">请选择文章频道</option>` + res.data.channels.map(item =>`<option value="${item.id}">${item.name}</option>`).join('')
    console.log(htmlStr);
    document.querySelector('.form-select').innerHTML = htmlStr
  }
  //网站运行后，默认调用一次
  setChannleList()

  //筛选-保存标记数字到查询参数上
  document.querySelectorAll('.form-check-input').forEach(radio =>{
    radio.addEventListener('change', e=>{
        console.log(e.target.value);
        queryObj.status = e.target.value
    })
  })

 //筛选频道id ，绑定到查询参数上
 document.querySelector('.form-select').addEventListener('change', e=>{
    console.log(e.target.value);
     queryObj.channel_id = e.target.value
      
   })

  
 
    //点击筛选按钮，传递查询参数对象到服务器
  document.querySelector('.btn-check1').addEventListener('click', ()=>{
    //匹配数据，覆盖展示到页面中
     setArtileList()
   })


//分页功能,下一页
document.querySelector('.next').addEventListener('click', e =>{
    if (queryObj.page < Math.ceil(totalCount / queryObj.per_page)) {
        queryObj.page++
        document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`
        setArtileList()
    }
})
//上一页
document.querySelector('.prev').addEventListener('click', e =>{
    if (queryObj.page >1) {
        queryObj.page--
        document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`
        setArtileList()
    }
})

//删除功能
document.querySelector('.art-list').addEventListener('click',async e =>{
    if(e.target.classList.contains('del')){
        const delId = e.target.parentNode.dataset.id
        const res = await axios({
            url: `/v1_0/mp/articles/${delId}`,
            method: 'DELETE'
        })
        //删除最后一条需要自动往前翻页
        const children = document.querySelector('.art-list').children
        if (children.length ===1 && queryObj.page !==1) {
            queryObj.page--
            document.querySelector('.page-now').innerHTML = `第 ${queryObj.page} 页`
        }
        setArtileList()
    }
})

//编辑按钮
document.querySelector('.art-list').addEventListener('click', e=>{
    if (e.target.classList.contains('edit')) {
        const artId = e.target.parentNode.dataset.id
        console.log(artId);
        location.href = `../publish/publish.html?id=${artId}`
    }
})



